<template>
  
  <el-table
    :data="stus"
    style="width: 100%"
    height="860">
    
    <el-table-column type="expand">
      <template #default="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="姓名">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="学号">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="专业">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
          <el-form-item label="学号">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="学号">
            <span>{{ props.row.id }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>

    <el-table-column
      label="学号"
      prop="id">
    </el-table-column>
    <el-table-column
      label="姓名"
      prop="name">
    </el-table-column>
    <el-table-column
      label="专业"
      prop="desc">
    </el-table-column>

    <el-table-column align="center">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
    
    
  </el-table>
</template>

<script>
import {ref} from 'vue'
export default {
 setup(){
  const stus =ref([{
    id:'200403030',
    name:'xiaocan',
    desc:'软件工程'
  },{
    id:'200403030',
    name:'xiaocan',
    desc:'软件工程'
  },{
    id:'200403030',
    name:'xiaocan',
    desc:'软件工程'
  },{
    id:'200403030',
    name:'xiaocan',
    desc:'软件工程'
  },])
  return {stus}
 }
};
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf !important;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-form{
    padding-left: 60px;
  }
</style>